<template>
    <div class="page-box">
        <TemplateVue
            :page="data.pageData"
            @search="data.onSearch"
            @reset="data.onReset"
            @paginationChange="data.onPaginationChange"
            @paginationSize="data.onPaginationSize"
            @operation="data.onOperation"
        >
        </TemplateVue>

        <!-- 编辑用户弹窗 -->
        <OperateVue :data="data.operationDialog" @close="data.onCloseOperationDialog" />

        <!-- 授权角色弹窗 -->
        <AuthorizationVue :data="data.authorizationDialog" @close="data.onCloseAuthorizationDialog" />

        <!-- 重置密码弹窗 -->
        <ResetPasswordVue
            :visible="data.resetPasswordDialog.visible"
            :id="data.resetPasswordDialog.id"
            @close="data.onCloseResetPasswordDialog"
        />
    </div>
</template>
<script setup lang="ts">
import TemplateVue from '@/components/template/Index.vue'
import UserData from '.'
import { reactive } from 'vue'
import OperateVue from './Operate.vue'
import AuthorizationVue from './Authorization.vue'
import ResetPasswordVue from './ResetPassword.vue'

const data = reactive(new UserData())
</script>
